<template>
  <el-dialog
    title="新建需求"
    :visible.sync="dialogVisible"
    width="1266px"
    :append-to-body="true"
    :close-on-click-modal="false"
    :before-close="handleClose">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
      <div class="left">
        <el-form-item label="标题" prop="cDemNme">
          <el-input v-model="ruleForm.cDemNme" placeholder="请输入标题" style="width: 465px"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <Editor v-model="ruleForm.cDemDes" style="width: 664px" :height="216" />
        </el-form-item>
        <el-form-item label="附件">
          <el-upload
            class="upload-demo"
            drag
            :before-upload="handelUpLoad"
            action="#"
            :http-request="requestUpload"
            multiple>
            <i class="el-icon-upload2 icon"></i>
            <div class="text">上传附件</div>
          </el-upload>
        </el-form-item>
      </div>
      <div class="right">
        <div class="title-head">
          属性
        </div>
        <el-form-item label="需求类型" prop="cDemType">
          <el-select v-model="ruleForm.cDemType" placeholder="未设置">
            <el-option
              v-for="item in demandOption"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="负责人" prop="cDemHead">
          <el-select v-model="ruleForm.cDemHead" placeholder="未设置">
            <el-option
              v-for="item in cProHeadOption"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="优先级" prop="cDemPri">
          <el-select v-model="ruleForm.cDemPri" placeholder="未设置">
            <el-option
              v-for="item in cDemPriOption"
              :key="item.value"
              :label="item.label"
              :value="item.value">
              <div class="highest2">
                <div :class="handleIcon(item.value)"></div>
                <span style="margin-left: 10px">{{ item.label }}</span>
              </div>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="归属项目" prop="cProNo">
          <el-select v-model="ruleForm.cProNo" placeholder="未设置">
            <el-option
              v-for="item in ascriptionOption"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="参与者" prop="participant">
          <el-cascader
            style="width: 100%"
            @change="handleParticipant"
            :show-all-levels="false"
            :options="allPersonnel"
            :props="{multiple: true,label: 'postName', children: 'users', value: 'postId'}"
            placeholder="未设置"
            clearable></el-cascader>
        </el-form-item>
        <div class="title-head">
          周期与进度
        </div>
        <el-form-item label="计划开始时间" prop="startTime" class="special">
          <el-date-picker
            v-model="startTime"
            @change="handelTime"
            type="datetime"
            placeholder="未设置">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="计划完成时间" prop="endTime" class="special">
          <el-date-picker
            v-model="endTime"
            @change="handelTime"
            type="datetime"
            placeholder="未设置">
          </el-date-picker>
        </el-form-item>
        <div class="title-head">
          工时信息
        </div>
        <el-form-item label="预估工时" prop="cRegWork">
          <el-input-number v-model="ruleForm.cRegWork" placeholder="未设置" :controls="false" :min="1" />
        </el-form-item>
        <div class="title-head">
          关联工作项
          <el-button style="float: right;margin-right: 35px" type="primary" size="mini" @click="correlation">关联</el-button>
        </div>
        <div>
          <el-table
            v-if="configList.length"
            v-loading="loading"
            ref="loopRef"
            :header-cell-style="{'background-color': '#F9F9F9'}"
            :data="configList"
            style="width: 97%"
            border>
            <el-table-column label="工作项名称" align="left" prop="cPmNme" sortable width="260">
              <template slot-scope="scope">
                <img src="@/assets/images/xq-xz.png" class="icon img-correct" />{{ scope.row.cPmNme }}
              </template>
            </el-table-column>
            <el-table-column label="工作项类型" align="center" prop="cPmType" width="120">
              <template slot-scope="scope">
                {{ handelCPmType(scope.row.cPmType) }}
              </template>
            </el-table-column>
            <el-table-column label="优先级" align="center" prop="cPmPri" width="120" sortable>
              <template slot-scope="scope">
                <div class="highest" v-if="scope.row.cPmPri == 1">
                  <div class="icon red2"></div>最高
                </div>
                <div class="highest" v-if="scope.row.cPmPri == 2">
                  <div class="icon orange"></div>较高
                </div>
                <div class="highest" v-if="scope.row.cPmPri == 3">
                  <div class="icon blue"></div>普通
                </div>
                <div class="highest" v-if="scope.row.cPmPri == 4">
                  <div class="icon gray"></div>较低
                </div>
              </template>
            </el-table-column>
            <el-table-column label="状态" align="center" prop="cPmState" width="120">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.cPmState == 1" class="primary">测试提交</el-tag>
                <el-tag v-if="scope.row.cPmState == 2" type="warning">进行中</el-tag>
                <el-tag v-if="scope.row.cPmState == 3" type="success">已完成</el-tag>
                <el-tag v-if="scope.row.cPmState == 4">测试通过</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="创建人" align="center" prop="cCrePer" width="120">
              <template slot-scope="scope">
                <span v-if="scope.row.cCrePerNme">
                  <span class="icon-name red">{{ scope.row.cCrePerNme[scope.row.cCrePerNme.length - 1] }}</span>
                  <span>{{ scope.row.cCrePerNme }}</span>
                </span>
              </template>
            </el-table-column>
            <el-table-column align="center">
              <template slot="header" slot-scope="scope">
                <i class="el-icon-setting" style="font-size: 18px"></i>
              </template>
              <template slot-scope="scope">
                <i class="el-icon-link" style="font-size: 18px;cursor: pointer" @click="handleTabClose(scope)"></i>
              </template>
            </el-table-column>
          </el-table>
          <span v-else style="color: #CCCCCC;">暂无关联工作项</span>
        </div>
      </div>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="done">完成</el-button>
    </span>
    <correlation-work-item ref="correlationWork" @selection="handleSelection" />
  </el-dialog>
</template>

<script>
import CorrelationWorkItem from "@/views/projectManage/demand/correlationWorkItem";
import {mixin} from "@/views/projectManage/mixin";
import {upload} from "@/api/projectManage/workItem";
import {dem} from "@/api/projectManage/demand";
export default {
  name: "addDemand",
  components: {CorrelationWorkItem},
  mixins: [mixin],
  data() {
    return {
      configList: [],
      loading: false,
      dialogVisible: false,
      ruleForm: {},
      rules: {
        cDemNme: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ],
        cDemType: [
          { required: true, message: '请选择需求类型', trigger: 'change' }
        ],
        cDemHead: [
          { required: true, message: '请选择负责人', trigger: 'change' }
        ],
        cDemPri: [
          { required: true, message: '请选择优先级', trigger: 'change' }
        ],
        cProNo: [
          { required: true, message: '请选择归属项目', trigger: 'change' }
        ],
        cRegWork: [
          { required: true, message: '请输入预估工时', trigger: 'blur' }
        ],
      },
      workTermList: new Map
    }
  },
  methods: {
    // 打开对话框
    open() {
      this.getTree()
      this.getMember()
      this.getListName()
      this.dialogVisible = true
    },
    // 关闭
    handleClose() {
      this.dialogVisible = false
      this.$refs['ruleForm'].resetFields();
      this.startTime = ''
      this.endTime = ''
      this.ruleForm = {}
    },
    // 完成
    done() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          dem({
            cDemState: '1',
            ...this.ruleForm
          }).then(res => {
            this.$notify({title: '成功', message: '新建需求成功！', type: 'success',});
            this.$emit('upDate')
            this.dialogVisible = false
            this.ruleForm = {}
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      })
      console.log(this.ruleForm)
    },
    // 文件上传前
    handelUpLoad(file) {
      console.log(file)
    },
    // 自定义文件上传地址
    requestUpload(params) {
      console.log(params)
      const data = new FormData()//自定义 参数类型必须为 FormData格式 此为强制要求
      data.append("file", params.file)
      data.append("cPmNo", this.projectInfo.cProNo)
      upload(data).then(res => {
        this.$notify({title: '成功', message: '上传成功！', type: 'success',});
      })
    },
    // 选择参与者
    handleParticipant(val) {
      const list = []
      val.forEach(i => list.push(i[1]))
      this.ruleForm.cDemPer = list.join(',')
    },
    // 删除关联项
    handleTabClose(scope) {
      this.configList.splice(scope.$index, 1)
    },
    // 新增关联项
    correlation() {
      this.$refs.correlationWork.open()
    },
    // 回显关联工作项
    handleSelection(list) {
      const arr = []
      this.configList = list
      list.forEach(i => arr.push(i.cPmNo))
      this.ruleForm.cWork = arr.join(',')
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  margin-top: 10vh!important;
}
.demo-ruleForm {
  display: flex;
  .left {
    width: 65%;
    margin-right: 25px;
    .icon {
      margin-top: 30%;
      font-size: 22px;
      color: #979797;
    }
    .text {
      line-height: 15px;
      font-size: 12px;
      font-weight: normal;
      color: #979797;
    }
    ::v-deep .el-upload-dragger {
      width: 109px;
      height: 109px;
    }
  }
  ::v-deep .right {
    width: 35%;
    .title-head {
      margin-bottom: 20px;
    }
     .el-select, .el-input__inner {
       width: 302px;
       text-align: left;
    }
    .special {
      transform: translateX(-18px);
      .el-form-item__label {
        width: 100px!important;
      }
    }
  }
}
.highest {
  position: relative;
  .icon {
    position: absolute;
    top: 8px;
    left: 14px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
  }
}
.highest2 {
  position: relative;
  .icon {
    position: absolute;
    top: 14px;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
  }
}

</style>
